<template>
  <div class="list row" :data="rootData" :style="mainHeight">
    <div class="eitd" v-if="rootData.children.length !==0">
      <div class="border-line" :style="titleBorder"></div>
      <div style="width: 100%; height: 45px;">
        <span class="title">条件</span>
      </div>
      <div class="border-line" :style="titleBorder"></div>
    </div>
    <div class="body" :style="bodyHeight">
      <div v-for="node in rootData.children" :key="node.id + 'node'">
        <div class="row-node" v-if="node.children.length === 0">
          <Condition :option="node" @makeNode="makeNode" @updateNodeCond="updateNodeCond" :filedList="filedList">
          </Condition>
        </div>
        <nested v-else :rootData="node" @makeNode="makeNode" @updateNodeCond="updateNodeCond" :filedList="filedList">
        </nested>
      </div>

      <div class="row-node">
        <div class="row items">
<!--          <div class="row-type">-->
<!--            <el-input size="mini" placeholder="维度或度量"></el-input>-->
<!--          </div>-->
          <div class="operating">
            <el-row>
              <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addNode(rootData.id, rootData.pid)"
                size="mini" style="margin-top: 2.5px;">或</el-button>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import Condition from '@/views/commonView/Condition'
import tree from '@/views/commonView/tree'

Vue.component('Condition', Condition)
export default {
  name: 'Nested',
  props: ['rootData', 'filedList'],
  data() {
    return {
      row: '',
      condVal: [],
      testOption: {}
    }
  },
  methods: {
    addChildren: function (id, pid) {
      this.makeNode(this, 'addChildren', id, pid)
    },
    addNode: function (id, pid) {
      this.makeNode(this, 'addNode', id, pid)
    },
    delNode: function (id, pid) {
      this.makeNode(this, 'delNode', id, pid)
    },
    makeNode(vm, type, id, pid) {
      if (vm) {
        vm.$emit('makeNode', undefined, type, id, pid)
      } else {
        this.$emit('makeNode', undefined, type, id, pid)
      }
    },
    // 跟新查询条件
    updateNodeCond(data) {
      debugger
      this.$emit('updateNodeCond', data)
    }
  },
  // 计算样式
  computed: {
    mainHeight: function () {
      let nodes = this.rootData
      let num = tree.getConut(nodes)
      // console.log("条件筛选属性计算classMain: " + num);

      if (nodes.id === '1') {
        num++
      }
      let result = {
        height: 35 * num + 'px'
      }

      return result
    },
    titleBorder: function () {
      let nodes = this.rootData
      let num = tree.getConut(nodes)
      // console.log("条件筛选属性计算classMain: " + num);
      if (nodes.id === 'root') {
        num++
      }
      let len = 35 * num - 45
      let result = {}
      if (len > 0) {
        result.height = len / 2 + 'px'
      } else {
        result.height = 0
      }

      return result
    },
    bodyHeight: function () {
      let nodes = this.rootData
      let num = tree.getConut(nodes) - 1
      // console.log("条件筛选属性计算classBody: " + num);
      let result = {}
      result.height = 35 * num + 'px'

      return result
    }
  }
}
</script>

<style lang="less" scoped>
.list {
  width: 98%;
  height: 100%;
  text-align: center;
  left: 20px;
  position: relative;
}

.filter {
  width: 100%;
  height: 100%;
  padding: 10px auto;
}

.eitd {
  width: 34px;
  left: 10px;
  height: 100%;
  position: absolute;
}

.eitd div {
  float: left;
}

.eitd span {
  display: block;
  width: 25px;
  height: 45px;
  font-size: 14px;
  border: 1px solid;
  margin: 0 auto;
}

.border-line {
  width: 50%;
  border-right: 1px solid black;
}

.eitd a {
  position: absolute;
  bottom: 0px;
  font-size: 1.5em;
  left: 5px;
}

.body {
  position: relative;
  width: calc(100% - 54px);
  left: 44px;
  height: 100%;
}

.row-node {
  height: 35px;
  width: 100%;
  position: relative;
  left: 0;
}

.node {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 0 5px 0 5px;
}

.val {
  width: 120px;
  height: 20px;
  margin: 3px 5px 2px 5px;
}

.items {
  width: 100%;
  height: 35px;
  left: 20px;
  position: inherit;
}

.row-type {
  display: inline-block;
  width: 120px;
  margin-left: 8px;
  height: 100%;
  padding-top: 3.6px;
}

.operating {
  display: inline-block;
  width: 30px;
  margin-left: 8px;
}

.operating a {
  position: absolute;
  margin-left: 8px;
  height: 100%;
  bottom: 0px;
  font-size: 1.5em;
  left: 5px;
}

.el-row {
  padding-top: 2.2px;
}
</style>
